<template>
  <div class="graduationPlan">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
      <el-breadcrumb-item>发布毕业设计安排</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form ref="planForm" :model="planForm" label-width="80px" class="content fixed-form" :rules="rules">
      <!--<el-form-item label="发布时间">
        <el-col>
          <el-date-picker type="date" @change="changeupTime" placeholder="选择日期" v-model="planForm.upTime" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>-->
      <!--<el-form-item label="发布人">
        <el-input v-model="planForm.uploader"></el-input>
      </el-form-item>-->
      <el-form-item label="专业" prop="majorID">
        <el-select v-model="planForm.majorID" placeholder="请选择专业" class="max-width" style="width:100%;">
          <el-option v-for="item in majorData" :label="item.majorName" :value="item.majorID"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年级" prop="grade">
        <el-date-picker @change="changeGrade"
                        v-model="planForm.grade"
                        type="year"
                        class="max-width"
                        placeholder="请选择学年" style="width:100%;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="学年" prop="academicYear">
        <el-date-picker @change="changeAcademicYear"
                        v-model="planForm.academicYear"
                        type="year"
                        class="max-width"
                        placeholder="请选择学年" style="width:100%;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="学期" prop="term">
        <el-select v-model="planForm.term" placeholder="请选择学期" class="max-width" style="width:100%;">
          <el-option label="01" value="01"></el-option>
          <el-option label="02" value="02"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="毕设内容">
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="this.$until.url+'/graduatePlan/uploadGraduatePlan'"
          name="graduatePlanName"
          :auto-upload="false"
          :on-success="show"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="内容简介">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="planForm.remark">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('planForm')">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default{
    name:'graduationPlan',
    data(){
      return {

        planForm:{
          upTime:'',
          uploader:'',
          term:'',
          academicYear:'',
          majorID:'',
          remark:'',
          grade:''
        },

        rules: {
          majorID: [
            {required: true, message: '请先选择专业', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '请先选择年级', trigger: 'blur'}
          ],
          academicYear: [
            {required: true, message: '请先选择学年', trigger: 'blur'}
          ],
          term: [
            {required: true, message: '请先选择学期', trigger: 'blur'}
          ]
        },

        majorData:[],
        msg:'',
        apiUrl:this.$until.url+'/graduatePlan/addGraduatePlan',
        initUrl:this.$until.url+'/courseDesign/getMajorDesign'
      }
    },
    components:{

    },
    created:function(){
      this.$http.post(this.initUrl)
        .then((res) => {
//            this.$set('gridData', res.data);
          this.majorData = Array.from(res.body);
        })
        .catch(function(err) {
          console.log(err)
        });
    },
    methods:{
      changeupTime:function(val){
        this.planForm.upTime = val;
      },
      changeAcademicYear:function(val){
        this.planForm.academicYear = val;
      },
      changeGrade:function(val){
        this.planForm.grade = val;
      },
      show:function(response,file,filelists){
        for(var key in response){
          this.planForm[key] = response[key];
        }
      },

      onSubmit(formName){
			this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addGraudatePlan();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
		},


      addGraudatePlan:function(){
        this.$http.post(this.apiUrl,this.planForm,{emulateJSON: true})
          .then((res) => {
            /* this.$set('gridData', res.data)*/

            /* ;*/
            this.msg = res.body.message;
            this.$notify({
              title: '成功',
              message:this.msg,
              type: 'success',
              onClose:()=>{
                this.$router.push({path:'/publishGraduation'});
              }
            });
          })
          .catch(function(err) {
            console.log(err);
          });
        /*  this.openMsg(this.msg);*/
      },
      openMsg:function(message){
        this.$notify({
          title:'ssss',
          message:message,
          type: 'success',
          duration:0
        });
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }


    }
  }
</script>
<style>

</style>
